<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音检索 - 跨媒体内容检索和理解系统</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* 功能特点展示样式 */
        .search-features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .search-options {
            background: #f8fafc;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 24px;
        }

        .feature-card {
            background: #f8fafc;
            padding: 20px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            transition: all 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .feature-card i {
            font-size: 24px;
            color: #4299e1;
            margin-bottom: 12px;
        }

        .feature-card h3 {
            font-size: 18px;
            color: #2d3748;
            margin-bottom: 8px;
        }

        .feature-card p {
            color: #718096;
            font-size: 14px;
            line-height: 1.6;
        }

        /* 语音识别状态提示 */
        .recognition-status {
            background: #ebf8ff;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .status-icon {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #4299e1;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.5; }
            100% { transform: scale(1); opacity: 1; }
        }

        .status-text {
            color: #4a5568;
            font-size: 14px;
        }

        /* 音频格式提示 */
        .format-tips {
            background: #f8fafc;
            border-radius: 12px;
            padding: 20px;
            margin: 24px 0;
        }

        .format-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 16px;
            margin-top: 12px;
        }

        .format-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4a5568;
            font-size: 14px;
        }

        .format-item i {
            color: #4299e1;
        }

        /* 音频控制面板美化 */
        .audio-control-panel {
            background: #f8fafc;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
        }

        .control-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .control-title {
            font-size: 16px;
            color: #2d3748;
            font-weight: 500;
        }

        .audio-time {
            color: #718096;
            font-size: 14px;
        }

        /* 音量指示器 */
        .volume-indicator {
            display: flex;
            gap: 3px;
            height: 40px;
            align-items: flex-end;
            margin: 20px 0;
        }

        .volume-bar {
            width: 4px;
            background: #4299e1;
            border-radius: 2px;
            transition: height 0.1s;
        }

        /* 录音提示 */
        .recording-tips {
            margin-top: 20px;
            padding: 16px;
            background: #fff3cd;
            border-radius: 8px;
            color: #856404;
            font-size: 14px;
            display: none;
        }

        .recording-tips.active {
            display: block;
        }

        /* 音频可视化增强 */
        .audio-visualizer {
            height: 150px;
            background: #f8fafc;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
        }

        .visualizer-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(66, 153, 225, 0.1) 0%, rgba(66, 153, 225, 0.05) 100%);
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="layout">
        <!-- 侧边栏导航 -->
        <div class="sidebar">
            <div class="logo">
                <span>跨媒体内容检索和理解系统</span>
            </div>
            <nav class="nav-menu">
                <a href="text-search.html" class="nav-item" data-type="text">文本检索</a>
                <a href="audio-search.html" class="nav-item active" data-type="audio">语音检索</a>
                <a href="image-search.html" class="nav-item" data-type="image">图像内容理解</a>
                <a href="image-retrieval.html" class="nav-item" data-type="image-retrieval">图像检索</a>
                <a href="video-search.html" class="nav-item" data-type="video">视频检索</a>
            </nav>
        </div>

        <!-- 主要内容区 -->
        <div class="main-content">
            <div class="search-section">
                <h2><i class="fas fa-microphone"></i> 语音检索图像</h2>

                <!-- 功能特点展示 -->
                <div class="search-features">
                    <div class="feature-card">
                        <i class="fas fa-wave-square"></i>
                        <h3>实时语音识别</h3>
                        <p>先进的语音识别技术，准确捕捉语音内容</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-microphone-alt"></i>
                        <h3>多格式支持</h3>
                        <p>支持多种音频格式，灵活的录制和上传方式</p>
                    </div>
                    <div class="feature-card">
                        <i class="fas fa-volume-up"></i>
                        <h3>智能降噪</h3>
                        <p>自动过滤背景噪音，提升识别准确度</p>
                    </div>
                </div>

                <!-- 语音识别状态 -->
                <div class="recognition-status">
                    <div class="status-icon"></div>
                    <span class="status-text">系统就绪，等待语音输入...</span>
                </div>

                <!-- 音频格式提示 -->
                <div class="format-tips">
                    <h4><i class="fas fa-info-circle"></i> 支持的音频格式</h4>
                    <div class="format-list">
                        <div class="format-item">
                            <i class="fas fa-check-circle"></i>
                            <span>WAV 格式</span>
                        </div>
                        <div class="format-item">
                            <i class="fas fa-check-circle"></i>
                            <span>MP3 格式</span>
                        </div>
                        <div class="format-item">
                            <i class="fas fa-check-circle"></i>
                            <span>M4A 格式</span>
                        </div>
                        <div class="format-item">
                            <i class="fas fa-check-circle"></i>
                            <span>AAC 格式</span>
                        </div>
                    </div>
                </div>

                <div class="audio-search-container">
                    <!-- 音频控制面板 -->
                    <div class="audio-control-panel">
                        <div class="control-header">
                            <span class="control-title">语音录制控制</span>
                            <span class="audio-time">00:00</span>
                        </div>

                        <!-- 保持原有的音频控制按钮 -->
                        <div class="audio-controls">
                            <button class="record-btn">
                                <i class="fas fa-microphone"></i>
                                开始录音
                            </button>
                            <button class="stop-btn" disabled>
                                <i class="fas fa-stop"></i>
                                停止录音
                            </button>
                            <button class="play-btn" disabled>
                                <i class="fas fa-play"></i>
                                播放录音
                            </button>
                        </div>

                        <!-- 音量指示器 -->
                        <div class="volume-indicator">
                            <div class="volume-bar" style="height: 20%"></div>
                            <div class="volume-bar" style="height: 40%"></div>
                            <div class="volume-bar" style="height: 60%"></div>
                            <div class="volume-bar" style="height: 80%"></div>
                            <div class="volume-bar" style="height: 100%"></div>
                        </div>

                        <!-- 录音提示 -->
                        <div class="recording-tips">
                            <i class="fas fa-info-circle"></i>
                            正在录音，请对着麦克风说话...
                        </div>
                    </div>

                    <!-- 音频可视化 -->
                    <div class="audio-visualizer">
                        <canvas id="visualizer"></canvas>
                        <div class="visualizer-overlay"></div>
                    </div>

                    <!-- 保持原有的音频播放器 -->
                    <div class="audio-player" style="display: none;">
                        <audio id="audio-preview" controls></audio>
                    </div>

                    <!-- 文件上传区域 -->
                    <div class="audio-upload">
                        <input type="file" id="audio-file" accept="audio/*">
                        <label for="audio-file">
                            <i class="fas fa-cloud-upload-alt"></i>
                            <span>点击上传音频文件或拖拽至此</span>
                            <p class="upload-hint">支持 WAV、MP3、M4A、AAC 等格式</p>
                        </label>
                    </div>

                    <!-- 检索按钮 -->
                    <div class="search-actions">
                        <button class="search-btn" disabled>
                            <i class="fas fa-microphone-alt"></i>
                            开始语音识别内容
                        </button>
                    </div>

                    <!-- 识别结果显示 -->
                    <div class="recognition-result" style="display: none;">
                        <h3>语音识别结果</h3>
                        <div class="transcript-box">
                            <p class="transcript-text"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="audio-search.js"></script>
</body>
</html> 